<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <title>goods</title>
</head>

<body>

<div class="alert alert-success" role="alert" th:if="${msg} eq 'success'">操作成功</div>
<div class="alert alert-danger" role="alert" th:if="${msg} eq 'failed'">操作失败</div>

<div style="padding: 5px;">
    <form class="form-inline" th:action="@{goods}" th:method="GET">
        <div class="form-group">
            <label for="billnoId">运单号</label>
            <input type="text" id="billnoId" name="billno">
        </div>
        <div class="form-group">
            <label for="shipperId">发货人</label>
            <input type="text" id="shipperId" name="shipper">
        </div>
        <div class="form-group">
            <label for="statusId">货物状态</label>
            <select id="statusId" name="status">
                <option></option>
                <option>未处理</option>
                <option>已处理</option>
            </select>
        </div>

        <button type="submit" class="btn btn-default">查询</button>
        <button type="button" onclick="location.href='newGoods'" class="btn btn-primary">新增</button>
    </form>
    <br/>
    <table id="goodsTable" class="table table-bordered">
        <thead>
        <tr>
            <th>操作</th>
            <th>运单号</th>
            <th>发货人</th>
            <th>货物类别</th>
            <th>质量</th>
            <th>容积</th>
            <th>收货人</th>
            <th>货物状态</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${page.list}">
            <td class="col-md-1">
                <button type="button" class="btn btn-default"><a th:href="@{newGoods(id=${item.id})}">编辑</a></button>
                <button type="button" class="btn btn-default"><a th:href="@{deleteGoodById(id=${item.id})}">删除</a></button>
            </td>
            <td class="col-md-1" th:text="${item.billno}"></td>
            <td class="col-md-1" th:text="${item.shipper}"></td>
            <td class="col-md-1" th:text="${item.type}"></td>
            <td class="col-md-1" th:text="${item.quality}"></td>
            <td class="col-md-1" th:text="${item.volume}"></td>
            <td class="col-md-1" th:text="${item.consignee}"></td>
            <td class="col-md-1" th:text="${item.status}"></td>
        </tr>
        </tbody>
    </table>
    <nav style="float: right">
        <ul class="pagination">
            <li><a th:href="@{goods(pageNum=1)}">首页</a></li>
            <li>
                <a th:href="@{goods(pageNum=${page.pageNum-1})}" aria-label="Previous">
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
            <li>
                <a th:href="@{goods(pageNum=${page.pageNum+1})}" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<!-- Mainly scripts -->
<script th:src="@{js/jquery-3.4.1.min.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script>
    window.setTimeout(function () {
        $('.alert').alert('close');
    }, 2000);
</script>

</body>
</html>
